<template>
    <div class="fields">
        <hd-tab :tabs="tabs"/>
        <el-alert
            :title="`正在管理【${article.title}】模型字段`"
            type="info"
            description="修改字段后需要点击保存提交才会生效"
            show-icon>
        </el-alert>
        <div class="mx-auto mt-2">
            <div class="w-full mb-8 overflow-hidden">
                <div class="w-full">
                    <el-tooltip content="Top center" placement="top">
                        <div slot="content">注意事项<br/>字段可以上下拖动以修改其顺序！！</div>
                        <table class="w-full">
                            <thead>

                            <tr class="text-md font-semibold tracking-wide text-left text-gray-900 bg-gray-100 uppercase border-b border-gray-600"
                            >
                                <th class="px-4 py-3">标题</th>
                                <th class="px-4 py-3">表单名</th>
                                <th class="px-4 py-3">表单类型</th>
                                <th class="px-4 py-3">中文表单名称</th>
                                <th class="px-4 py-3">系统字段</th>
                                <th class="px-4 py-3">提示信息</th>
                                <th class="px-4 py-3">操作</th>
                            </tr>
                            </thead>
                            <draggable v-model="article.fields" tag="tbody" class="bg-white">
                                <tr v-for="(field, index) in article.fields" :key="index"
                                    class="py-2 text-gray-700 text-xs">

                                    <td class="px-4 py-3 border">{{ field.title }}</td>
                                    <td class="px-4 py-3 border">{{ field.name }}</td>
                                    <td class="px-4 py-3 border">{{ type(field) }}</td>
                                    <td class="px-4 py-3 border">
                                        <i class="far fa-check-square text-green-700"
                                           v-if="field.show">
                                        </i>
                                    </td>
                                    <td class="px-4 py-3 border">
                                        <i class="far fa-check-square text-green-700"
                                           v-if="field.system"></i>
                                    </td>
                                    <td class="px-4 py-3 border">{{ field.placeholder }}</td>
                                    <td class="px-4 py-3 border" width="200">
                                        <edit :field="field" :article="article" class="inline-block">编辑</edit>
                                        <el-button type="danger" size="mini" v-if="!field.system" @click="del(field)">删除
                                        </el-button>
                                    </td>
                                </tr>
                            </draggable>
                        </table>
                    </el-tooltip>
                    <el-button-group class="mt-3">
                        <el-button type="success" class="mt-2" @click="add">添加自定义字段</el-button>
                        <el-button type="primary" class="mt-2" @click="onSubmit">保存</el-button>
                    </el-button-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import tabs from './tabs'
import Edit from './components/Edit'
import types from './components/types'
import draggable from 'vuedraggable'

//默认值用于添加字段
const field = {
    title: '',
    name: '',
    type: 'input',
    placeholder: '',
    value: '',
    options: '',
    rank: 0,
    show: true,
    validate_rule: '',
    validate_error: ''
}
export default {
    route: {path: 'article/:id/field/index'},
    components: {Edit, draggable},
    data() {
        return {
            tabs,
            types,
            article: {}
        }
    },
    async created() {
        this.article = await axios.get(`admin/article/${this.$route.params.id}`)
        // this.$set(this.article, 'fields', fields)
    },
    methods: {
        //类型中文
        type(field) {
            return this.types.find(t => t.type == field.type).label
        },
        //添加字段
        add() {
            this.article.fields.push(Object.assign({}, field))
        },
        //删除非系统字段
        del(field) {
            this.$confirm(`确定删除该字段吗?`, '温馨提示').then(_ => {
                let index = this.article.fields.findIndex(f => f.name == field.name)
                this.article.fields.splice(index, 1)
            })
        },
        //保存
        onSubmit() {
            if (this.article.fields.some(f => f.name == '' || f.title == '')) {
                return this.$message.error(`有字段数据不完整`)
            }
            axios.put(`admin/article/${this.$route.params.id}`, this.article)
            this.$router.push({name:'admin.article.index'})
        }
    }
}
</script>
